@extends('layouts.mobile')

@section('title', '我的收藏')

@section('content')
    <div class="collect">
        <ul class="tabs">
            <li :class="{active:type=='item'}" v-on:click="switchType('item')">商品</li>
            <li :class="{active:type=='shop'}" v-on:click="switchType('shop')">店铺</li>
            <li :class="{active:type=='article'}" v-on:click="switchType('article')">文章</li>
        </ul>

        <div class="item-list">
            <div class="item" v-for="item in items" v-on:click="onClickItem(item)">
                <div class="image bg-cover" :style="{'background-image':'url('+item.image+')'}"></div>
                <div class="info">
                    <div class="title">@{{ item.title }}</div>
                    <div class="flex"></div>
                    <div class="time">@{{ item.created_at }}</div>
                </div>
            </div>
        </div>
    </div>
@stop

@section('foot')
    <script type="text/javascript">
        var type = 'item';
        (function () {
            var offset = 0;
            var isLoading = false;
            var loadMoreAble = false;
            var loadDatasource = function (callback) {
                isLoading = true;
                $.ajax({
                    url:'/mobile/collect/getjson',
                    data:{offset:offset, count:10, type:type},
                    success:function (response) {
                        isLoading = false;
                        loadMoreAble = response.items.length === 10;
                        if (callback) callback(response);
                    }
                });
            };
            var vm = new Vue({
                el:'#app',
                data:{
                    items:[],
                    type:'item'
                },
                mounted:function () {
                    var self = this;
                    loadDatasource(function (response) {
                        var items = self.items;
                        self.items = items.concat(response.items);
                    });
                },
                methods:{
                    onClickItem:function (item) {
                        window.location.href = item.url;
                    },
                    switchType:function (t) {
                        type = t;
                        this.type = t;
                        loadDatasource(function (response) {
                            vm.items = response.items;
                        });
                    }
                }
            });
            onDocumentReachBottom(function () {
                if (isLoading) return;
                if (!loadMoreAble) return;
                offset+= 10;
                loadDatasource(function (response) {
                    vm.items = vm.items.concat(response.items);
                });
            });
        })();
    </script>
@stop
